<template>
  <el-row style="min-width: 1500px">
    <el-col :span="24">
      <div class="program_flex_box x-flex">
        <div class="wrap_left_grouping">
          <div class="wrap_left_grouping--head-title x-flex x-row-between">
            <text>设备分组</text>
            <el-button
              text
              type="primary"
              @click="addBut"
              v-has="'facility-Addgroup'"
              ><img alt="+" class="x-m-r-6" src="@/assets/Add.svg" />新增分组
            </el-button>
          </div>
          <el-dialog @close="clearAd" v-model="dialogVisible" width="30%">
            <template #header="{ titleId, titleClass }">
              <div class="my-header">
                <h4
                  :id="titleId"
                  :class="titleClass"
                  style="display: flex; align-items: center"
                >
                  <div class="add"></div>
                  <div style="margin: 0 5px">{{ userINfo }}</div>
                </h4>
              </div>
            </template>
            <el-input
              v-model="addTreeName"
              placeholder="请输入分组名称"
              maxlength="20"
              @input="btnAdd"
            />
            <div v-if="addIN" style="color: red">分组名称不能为空</div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="onAddTreeName">
                  添加
                </el-button>
              </span>
            </template>
          </el-dialog>
          <div class="wrap_left_grouping--content-area">
            <el-tree
              :data="trees"
              default-expand-all
              @node-click="onTreeClick"
              :expand-on-click-node="false"
            >
              <template #default="{ node, data }">
                <div class="x-flex x-row-between x-flex1">
                  <span v-if="!data.isEditNode">{{ node.label }}</span>

                  <el-dropdown v-if="!data.isAddNode">
                    <span style="outline: none">
                      <el-icon color="#a8abb2"><MoreFilled /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          @click.stop="addAllNode(node, data)"
                          v-has="'facility-Addgroup'"
                          >创建子分组
                        </el-dropdown-item>
                        <el-dropdown-item
                          @click.stop="editStop(node, data)"
                          v-has="'facility-Editgroup'"
                          >重命名
                        </el-dropdown-item>
                        <el-dropdown-item
                          @click.stop="delAllNode(node, data)"
                          v-has="'facilityDelete'"
                          >删除
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <br />
              </template>
            </el-tree>
          </div>
        </div>
        <div class="wrap_right_list">
          <div class="wrap_right_list--head-title">
            <text>设备列表</text>
          </div>
          <div class="wrap_right_list--head-operation">
            <div class="x-flex x-row-between">
              <div class="x-flex">
                <span>
                  <el-button
                    size="large"
                    type="primary"
                    @click="openClick()"
                    v-has="'Addfacility'"
                    >新增设备</el-button
                  >
                  <el-dialog
                    v-model="isNewDevice"
                    :close-on-press-escape="false"
                    :title="devName"
                    width="30%"
                    @close="onDialogClose"
                  >
                    <template #header="{ titleId, titleClass }">
                      <div class="my-header">
                        <h4
                          :id="titleId"
                          :class="titleClass"
                          style="display: flex; align-items: center"
                        >
                          <div class="add"></div>
                          <div style="margin: 0 5px">{{ devName }}</div>
                        </h4>
                      </div>
                    </template>
                    <el-form
                      ref="equipFormRef"
                      :model="equipForm"
                      :rules="equipRules"
                      label-position="left"
                      label-width="95px"
                    >
                      <div>
                        <div class="-addEquip_minHead">基本信息</div>
                        <div>
                          <el-form-item label="编号" prop="eNo">
                            <el-input
                              v-model="equipForm.eNo"
                              :placeholder="placeholders"
                              :disabled="disableds"
                            />
                          </el-form-item>
                          <el-form-item label="名称" prop="eName">
                            <el-input
                              v-model="equipForm.eName"
                              placeholder="请输入"
                              maxlength="20"
                            />
                          </el-form-item>
                          <el-form-item label="设备组" prop="eEquipName">
                            <div class="-addDialogFormInput e-l-cascader">
                              <el-cascader
                                v-model="equipForm.eEquipName"
                                ref="regionRef"
                                :options="trees"
                                :props="regionProps"
                                clearable
                                placeholder="请选择设备组"
                                @change="regionRefClick"
                              />
                            </div>
                          </el-form-item>
                          <el-form-item label="责任人手机" prop="eResponsible">
                            <el-input
                              v-model="equipForm.eResponsible"
                              placeholder="请输入"
                              maxlength="11"
                            />
                          </el-form-item>
                          <el-form-item label="地区" prop="eRegion">
                            <div class="-addDialogFormInput e-l-cascader">
                              <el-cascader
                                ref="equipRegion"
                                v-model="equipForm.eRegion"
                                :options="regionData"
                                :props="locationProps"
                                clearable
                                placeholder="请选择地区"
                                @change="handleChangeRegion"
                                style="color: red"
                                :class="{ 'placeholder-red': isEditing }"
                              />
                            </div>
                          </el-form-item>
                          <el-form-item
                            label="详细地址"
                            prop="eDetailedAddress"
                          >
                            <el-input
                              v-model="equipForm.eDetailedAddress"
                              :autosize="{ minRows: 3, maxRows: 3 }"
                              placeholder="请输入"
                              type="textarea"
                              maxlength="50"
                            />
                          </el-form-item>
                        </div>
                      </div>
                      <div>
                        <div class="-addEquip_minHead">设备信息</div>
                        <el-form-item label="屏幕尺寸" prop="wide">
                          <div class="-addDialogFormInput x-flex">
                            <el-input-number
                              v-model="equipForm.wide"
                              placeholder="宽"
                              max="5000"
                              min="1"
                              controls-position="right"
                              :precision="0"
                            />
                            <span style="padding-left: 3px">cm</span>
                            <el-icon class="x-m-l-8 x-m-r-8">
                              <Close />
                            </el-icon>
                            <el-input-number
                              v-model="equipForm.High"
                              placeholder="高"
                              max="5000"
                              :precision="0"
                              min="1"
                              controls-position="right"
                            />
                            <span style="padding-left: 3px">cm</span>
                          </div>
                        </el-form-item>
                      </div>
                    </el-form>
                    <template #footer>
                      <span>
                        <el-button @click="resetEquipForm">取消</el-button>
                        <el-button
                          type="primary"
                          @click="submitAddEquipForm(equipFormRef)"
                        >
                          确定
                        </el-button>
                      </span>
                    </template>
                  </el-dialog>
                </span>
                <el-dropdown
                  ref="clearAds"
                  class="x-m-l-12 x-m-r-12"
                  trigger="contextmenu"
                >
                  <el-button
                    size="large"
                    @click="clearAdsTable(tableData)"
                    v-has="'facilityAdver'"
                    >发布广告
                  </el-button>
                  <template #dropdown>
                    <div class="x-p-8">请选择设备</div>
                  </template>
                </el-dropdown>
                <span>
                  <el-dropdown ref="dropdownGrouping" trigger="contextmenu">
                    <el-button
                      size="large"
                      @click="changeGrouping(tableData)"
                      v-has="'Editfacility'"
                      >更改分组
                    </el-button>
                    <template #dropdown>
                      <div class="x-p-8">请选择设备</div>
                    </template>
                  </el-dropdown>
                  <el-dialog
                    v-model="isGroupingDialog"
                    :close-on-press-escape="false"
                    width="25%"
                    @close="onDialogClos"
                  >
                    <template #header="{ titleId, titleClass }">
                      <div class="my-header">
                        <h4
                          :id="titleId"
                          :class="titleClass"
                          style="display: flex; align-items: center"
                        >
                          <div class="add"></div>
                          <div style="margin: 0 5px">选择分组</div>
                        </h4>
                      </div>
                    </template>
                    <el-form
                      ref="equipFormRef"
                      :model="equipForm"
                      :rules="equipRules"
                      label-position="left"
                      label-width="70px"
                    >
                      <el-form-item label="设备组" prop="eEquipName">
                        <div class="-addDialogFormInput e-l-cascader">
                          <el-cascader
                            v-model="equipForm.eEquipName"
                            :options="trees"
                            :props="regionProps"
                            clearable
                            ref="equader"
                            placeholder="请选择设备组"
                            @change="casca"
                          />
                        </div>
                        <div v-if="groupifo" style="color: red">
                          设备分组不能为空
                        </div>
                      </el-form-item>
                    </el-form>
                    <template #footer>
                      <span>
                        <el-button @click="isGroupingDialog = false"
                          >取消</el-button
                        >
                        <el-button
                          type="primary"
                          @click="submitChangeGrouping(equipFormRef)"
                        >
                          确定
                        </el-button>
                      </span>
                    </template>
                  </el-dialog>
                </span>
                <el-dropdown class="x-m-l-12" trigger="click">
                  <el-button @click="care" size="large"
                    >更多操作
                    <div>
                      <el-icon v-if="careShow">
                        <CaretBottom />
                      </el-icon>
                      <el-icon v-else><CaretTop /></el-icon>
                    </div>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        @click.stop="onFullShutdown"
                        v-has="'facilityShutdown'"
                        >关机</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click.stop="onFullRestart"
                        v-has="'facilityStartingup'"
                        >重启</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click.stop="onFullMute"
                        v-has="'facilityMute'"
                        >静音</el-dropdown-item
                      >
                      <el-dropdown-item
                        @click.stop="onFullCancelMute"
                        v-has="'facilitySilentOFF'"
                        >取消静音</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="x-flex">
                <el-input
                  v-model="searchInput"
                  :suffix-icon="Search"
                  placeholder="请输入设备编号、名称或MAC地址"
                  size="large"
                  style="cursor: pointer"
                  @change="SearchClick"
                />
                <el-button
                  size="large"
                  text
                  type="primary"
                  @click="AdvancedSearchShow = !AdvancedSearchShow"
                >
                  高级搜索
                  <el-icon :class="{ 'angle-icon': AdvancedSearchShow }">
                    <ArrowDown />
                  </el-icon>
                </el-button>
              </div>
            </div>
            <div
              v-show="AdvancedSearchShow"
              class="-advancedInput x-m-t-16 x-flex"
            >
              <el-select
                v-model="ruleForm.deviceStatus"
                class="x-m-r-12"
                style="width: 10.6vw"
                placeholder="请选择设备状态"
                size="large"
              >
                <el-option label="全部状态" value="" />
                <el-option label="在线" value="0" />
                <el-option label="离线" value="1" />
              </el-select>
              <el-select
                v-model="ruleForm.playStatus"
                class="x-m-r-12"
                style="width: 10.6vw"
                placeholder="请选择播放状态"
                size="large"
              >
                <el-option label="全部播放状态" value="" />
                <el-option label="播放中" value="0" />
                <el-option label="已暂停" value="1" />
                <el-option label="空闲" value="2" />
              </el-select>
              <el-cascader
                ref="cascader"
                v-model="ruleForm.region"
                :options="regionData"
                :props="locationProps"
                class="x-m-r-12"
                style="width: 10.6vw"
                placeholder="请选择地区"
                size="large"
                @change="handleChangeQueryRegion"
              />
              <el-select
                v-model="ruleForm.bombedStatus"
                class="x-m-r-12"
                style="width: 10.6vw"
                placeholder="请选择软件版本"
                size="large"
              >
                <el-option
                  v-for="item in opitInof"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <div class="custom-datepicker">
                <el-date-picker
                  v-model="ruleForm.dayValue"
                  class="x-m-r-12"
                  style="width: 17.5vw"
                  end-placeholder="结束日期"
                  size="large"
                  start-placeholder="开始日期"
                  type="daterange"
                  value-format="YYYY-MM-DD"
                  :clearable="false"
                />
              </div>
              <el-button size="large" @click.stop="onCancel">
                <el-icon>
                  <RefreshLeft />
                </el-icon>
              </el-button>
            </div>
          </div>
          <div class="wrap_right_list--table-content">
            <el-table
              ref="multipleTableRef"
              :data="tableData"
              :header-cell-style="{ background: '#F6F7F9' }"
              :row-style="{ height: '64px' }"
              height="calc(90vh - 220px)"
              @selection-change="handleSelectionChange"
            >
              <template #empty>
                <div class="no-data">
                  <el-empty
                    :image="require('../../assets/nothave.png')"
                    style="margin-top: 30%"
                  >
                  </el-empty>
                </div>
              </template>
              <el-table-column type="selection" width="40" />
              <el-table-column label="编号/名称" show-overflow-tooltip>
                <template #default="{ row }">
                  <div>
                    <div style="line-height: 13px; margin: 5px 0">
                      <el-text style="max-width: 70%" truncated
                        >{{ row.deviceNo }}
                      </el-text>
                      <span v-if="!row.isFile" class="--table-column-icon">
                        <el-icon color="#A8ADB2" @click.stop="copyFileName(row)"
                          ><CopyDocument
                        /></el-icon>
                      </span>
                    </div>
                    <div style="line-height: 15px; margin: 5px 0">
                      <el-text
                        v-if="!row.isFile"
                        style="max-width: 70%"
                        truncated
                        >{{ row.deviceName }}
                      </el-text>
                      <el-input
                        v-show="row.isFile"
                        v-model="row.deviceName"
                        class="file-child-node"
                        @change="editChang(row)"
                        maxlength="20"
                        @keyup.enter="row.isFile = false"
                      />
                      <span v-if="!row.isFile" class="--table-column-icon">
                        <el-icon color="#A8ADB2" @click="editClick(row)"
                          ><EditPen
                        /></el-icon>
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="设备状态" property="resolution">
                <template #default="{ row }">
                  <div>
                    <el-badge
                      :type="equipmentStatus.bad[row.onlineStatus]"
                      is-dot
                      style="vertical-align: -5px; margin-right: 8px"
                    />
                    <span>{{ equipmentStatus.equip[row.onlineStatus] }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="播放状态" property="resolution">
                <template #default="{ row }">
                  <div>
                    <el-badge
                      :type="equipmentStatus.bad[row.playStatus]"
                      is-dot
                      style="vertical-align: -5px; margin-right: 8px"
                    />
                    <span>{{
                      equipmentStatus.useInfoStatus[row.playStatus]
                    }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="MAC" property="mac" width="150" />
              <el-table-column
                label="软件版本"
                width="150"
                property="version"
              />
              <el-table-column
                label="地区"
                property="address"
                show-overflow-tooltip
              >
                <template #default="{ row }">
                  <span>{{ row.economizeName }}</span>
                  <span v-if="row.cityName">/{{ row.cityName }}</span>
                  <span v-if="row.areaName">/{{ row.areaName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="IP地址" property="lastOnlineIp" />
              <el-table-column label="操作" width="180">
                <template #default="{ row }">
                  <!-- <el-button size="small" text type="primary">发布</el-button> -->
                  <div
                    style="display: flex; align-items: center; margin: 0 -10px"
                  >
                    <el-button
                      size="small"
                      text
                      type="primary"
                      @click.stop="issue(row)"
                      v-has="'facilityslde'"
                      >发布
                    </el-button>
                    <el-button
                      size="small"
                      text
                      type="primary"
                      @click.stop="onEquipInfo(row, '2')"
                      v-has="'facilityslde'"
                      >远程
                    </el-button>
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        更多
                        <el-icon><ArrowDown /></el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            @click.stop="onShutdown(row.id)"
                            v-has="'facilitymoreslde'"
                            >关机</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click.stop="onBootRestart(row.id)"
                            v-has="'facilitymoreaction'"
                            >重启</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click.stop="onMute(row.id)"
                            v-has="'facilityMuteUnmute'"
                            >静音</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click.stop="closeMute(row.id)"
                            v-has="'facilityMuteUnmute'"
                            >取消静音</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click.stop="onEquipInfo(row, '1')"
                            v-has="'facilityEdit'"
                            >设备详情
                          </el-dropdown-item>
                          <el-dropdown-item
                            @click="onEditInfo(row)"
                            v-has="'facilitycompile'"
                            >编辑设备信息
                          </el-dropdown-item>
                          <el-dropdown-item
                            @click="goList(row)"
                            v-has="'facilityBrod'"
                            >播放计划
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <el-dialog v-model="isInfoEquip" @close="closeBtn" width="50%">
              <template #header="{ titleId, titleClass }">
                <div class="my-header">
                  <h4
                    :id="titleId"
                    :class="titleClass"
                    style="display: flex; align-items: center"
                  >
                    <div class="add"></div>
                    <div style="margin: 0 5px">设备详情</div>
                  </h4>
                </div>
              </template>
              <div class="e-l-dialog_box">
                <div class="x-flex x-row-between x-m-b-20">
                  <div>
                    <el-menu
                      :default-active="infoEquipCount"
                      :ellipsis="false"
                      class="el-menu-demo"
                      mode="horizontal"
                      @select="infoEquipCount = $event"
                    >
                      <el-menu-item index="1">设备详情</el-menu-item>
                      <el-menu-item index="2">远程控制</el-menu-item>
                    </el-menu>
                  </div>
                  <div>
                    <el-button size="large" type="primary" @click="issue"
                      >发布</el-button
                    >
                  </div>
                </div>
                <el-descriptions
                  v-show="infoEquipCount == 1"
                  :column="2"
                  border
                >
                  <el-descriptions-item
                    v-for="eItem in infoName"
                    :key="eItem.title"
                    :label="eItem.title"
                  >
                    <div
                      style="
                        width: 250px;
                        white-space: normal;
                        word-wrap: break-word;
                        word-break: break-all;
                      "
                    >
                      <div v-if="Array.isArray(eItem.key)">
                        <span v-for="addIt in eItem.key" :key="addIt">{{
                          infoVal[addIt]
                        }}</span>
                      </div>
                      <div v-else-if="eItem.key == 'onlineStatus'">
                        {{ equipmentStatus.equip[infoVal[eItem.key]] }}
                      </div>
                      <div v-else-if="eItem.key == 'playStatus'">
                        {{ equipmentStatus.useInfoStatus[infoVal[eItem.key]] }}
                      </div>
                      <div v-else-if="eItem.key == 'status'">
                        {{ equipmentStatus.hig[infoVal[eItem.key]] }}
                      </div>
                      <div v-else>{{ infoVal[eItem.key] }}</div>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
                <div v-show="infoEquipCount == 2">
                  <div class="control_prompt">基本控制</div>
                  <div class="control_content">
                    <el-form label-position="left" label-width="80px">
                      <el-form-item label="开关机">
                        <el-radio-group v-model="radioControl">
                          <el-radio label="1" size="large" @change="poweOff"
                            >关机</el-radio
                          >
                          <el-radio label="2" size="large" @change="editOpen"
                            >重启</el-radio
                          >
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item label="音量">
                        <div class="x-flex" style="width: 100%">
                          <el-slider
                            v-model="sliderVolumeControl"
                            @change="changeSlider"
                          />
                          <el-checkbox
                            v-model="checkedMuteControl"
                            class="x-m-l-18"
                            label="静音"
                            @change="openBtns"
                          />
                        </div>
                      </el-form-item>
                      <el-form-item label="屏背光" style="padding-right: 69px">
                        <el-slider
                          v-model="sliderBacklightControl"
                          @change="changeSlider"
                        />
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </div>
            </el-dialog>

            <div class="-pages">
              <el-pagination
                v-model:current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :total="currentPageTotal"
                background
                layout="total, sizes, prev, pager, next"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import {
  computed,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  shallowReactive,
  shallowRef,
  unref,
  watch,
} from "vue";
import {
  ArrowDown,
  CaretBottom,
  CaretTop,
  Close,
  CopyDocument,
  EditPen,
  MoreFilled,
  RefreshLeft,
  ArrowUp,
  Search,
} from "@element-plus/icons-vue";

import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import type { FormInstance, FormRules, CascaderProps } from "element-plus";
import {
  addGroups,
  deviceGroup,
  gainGroups,
  getEconomize,
  getSubordinateArea,
  putGroups,
  addDevice,
  devicePage,
  devicePut,
  device,
  devicePoweron,
  deviceShutdown,
  deviceControl,
  updateGroup,
  deviceMute,
  deviceoffMute,
  deviceService,
  deviceConfig,
  software,
} from "@/api/facility";
import { convertData, convertDatad } from "@/utils/list";
import type { Address } from "@/utils/list";
import ClipboardJS from "clipboard";
import router from "@/router";

//新增分组
const dialogVisible = shallowRef(false);
const addTreeName = shallowRef("");
const TreeValue = shallowRef("");
//树形控件
const trees = ref<Tree[]>([]);
const userINfo = ref("新增分组");
const onTreeClick = (e: any) => {
  TreeValue.value = e.value;
  getList(ruleForm, "");
};
var careShow = ref(false);
const care = () => {
  careShow.value = !careShow.value;
};
const getTreeData = async () => {
  const { data } = await gainGroups();
  if (data.code !== 1) return ElMessage({ message: data.msg, type: "error" });
  trees.value = convertDatad(data.data);
};
var addIN = ref(false);
const clearAd = () => {
  addTreeName.value = "";
  addIN.value = false;
};
// 新增分组确定
const onAddTreeName = async () => {
  if (addTreeName.value) {
    addIN.value = false;
  } else {
    addIN.value = true;
  }
  const params = {
    groupName: unref(addTreeName),
    pid: 0,
  };
  if (userINfo.value == "新增分组") {
    if (addTreeName.value) {
      const { data } = await addGroups(params);
      if (data.code !== 1)
        return ElMessage({ message: data.msg, type: "error", duration: 1000 });
      await getTreeData();
      ElMessage({ message: data.msg, type: "success", duration: 1000 });
      dialogVisible.value = false;
    }
  } else if (userINfo.value == "添加子分组") {
    if (addTreeName.value) {
      const paramss = {
        groupName: unref(addTreeName),
        pid: edpid.value,
      };
      const { data } = await addGroups(paramss);
      if (data.code !== 1)
        return ElMessage({ message: data.msg, type: "error", duration: 1000 });
      await getTreeData();
      ElMessage({ message: data.msg, type: "success", duration: 1000 });
      dialogVisible.value = false;
    }
  } else if (userINfo.value == "编辑分组") {
    putGroups(newObj.value)
      .then(({ data }) => {
        if (data.code !== 1)
          return ElMessage({
            message: data.msg,
            type: "error",
            duration: 1000,
          });
        getTreeData();
        ElMessage({ message: data.msg, type: "success", duration: 1000 });
        dialogVisible.value = false;
        addTreeName.value = "";
      })
      .catch((e) => {});
  }
};
const btnAdd = (val: any) => {
  if (val) {
    addIN.value = false;
  } else {
    addIN.value = true;
  }
};
const closeBtn = () => {
  infoName.value = [];
};
// 新增分组按钮
const addBut = () => {
  dialogVisible.value = true;
  userINfo.value = "新增分组";
};
var edpid = ref("");
var newObj = ref({});
//新增子分组
const addAllNode = (node: any, data: Tree) => {
  dialogVisible.value = true;
  userINfo.value = "添加子分组";
  edpid.value = data.value;
};
// 编辑分组
const editStop = (node: any, data: Tree) => {
  addTreeName.value = data.label;
  dialogVisible.value = true;
  userINfo.value = "编辑分组";
  edpid.value = data.value;
  let { label, objectVersionNumber, pid, value } = data;
  newObj.value = {
    pid: pid ? pid : 0,
    groupName: addTreeName.value ? addTreeName : label,
    id: value,
    objectVersionNumber,
  };
};

const delAllNode = (node: any, data: Tree) => {
  ElMessageBox.confirm("是否确认删除该数据?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  })
    .then(async () => {
      let { data: res } = await deviceGroup(data.value);
      if (res.code !== 1) {
        ElMessage({ message: res.msg, type: "error", duration: 1000 });
      } else {
        ElMessage({ message: res.msg, type: "success", duration: 1000 });
        await getTreeData();
      }
    })
    .catch((e) => {});
};
// 设备列表搜索
const equipFormRef = ref<FormInstance>();
const isNewDevice = shallowRef(false);
const dropdownGrouping = ref();
const instance: any = getCurrentInstance();
const clearAds = ref();
const isAddEdit = shallowRef(false); //新增设备--判断是新增还是编辑
const equipForm = reactive<TscEquip>({
  eNo: "",
  eName: "",
  eEquipName: [],
  eResponsible: "",
  eRegion: [],
  eRegionZh: [],
  eDetailedAddress: "",
  wide: "1",
  High: "1",
});
const equipRules = reactive<FormRules>({
  eNo: [
    { required: true, message: "编号不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("编号不能为空"));
        } else {
          callback();
        }
      },
    },
  ],
  eName: [
    { required: true, message: "名称不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("名称不能为空"));
        } else {
          callback();
        }
      },
    },
  ],

  eResponsible: [
    { required: true, message: "责任人手机号不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("手机号不能为空"));
        }
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        // eslint-disable-next-line no-console
        if (!reg.test(equipForm.eResponsible)) {
          callback(new Error("输入的手机号不正确,请重新输入"));
        } else {
          callback();
        }
      },
    },
  ],
  eRegion: [
    { required: true, message: "所在地区不能为空", trigger: "blur" },

    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("所在地区不能为空"));
        } else {
          callback();
        }
      },
    },
  ],
  eEquipName: [
    { required: true, message: "设备组不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("设备组不能为空"));
        } else {
          callback();
        }
      },
    },
  ],
  eDetailedAddress: [
    { required: true, message: "详细地址不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("详细地址不能为空"));
        } else {
          callback();
        }
      },
    },
  ],
  wide: [
    { required: true, message: "宽高不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("宽高不能为空"));
        } else {
          callback();
        }
      },
    },
  ],

  High: [
    { required: true, message: "宽高不能为空", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error("宽高不能为空"));
        } else {
          callback();
        }
      },
    },
  ],
});
const addInput = reactive<FormRules>({
  addTreeName: [
    { required: true, message: "分组名称不能为空", trigger: "red" },
  ],
});
var regionRef = ref();
const regionRefClick = () => {
  regionRef.value.togglePopperVisible();
};
var equipRegion = ref();
const handleChangeRegion = (val: any) => {
  const selectedOption = instance.refs.equipRegion.getCheckedNodes();
  equipRegion.value.togglePopperVisible();
  equipForm.eRegionZh = selectedOption[0].pathLabels;
};
//输入框/选择器
const regionData = ref<Address[]>([]);
const ruleForm = shallowReactive({
  searchInput: "", //编号/名称/MAC
  deviceStatus: "", //设备状态
  playStatus: "", //播放状态
  region: "", //地区选择
  regionZh: "", //地区中文
  bombedStatus: "", //版本
  dayValue: "", //日期
});
const searchInput = ref("");
watch(
  () => ruleForm,
  (newVal) => {
    getList(newVal, "");
  },
  { deep: true }
);
const AdvancedSearchShow = shallowRef(false);
const regionProps: CascaderProps = {
  expandTrigger: "hover",
  checkStrictly: true,
};
const locationProps: CascaderProps = {
  expandTrigger: "click",
  checkStrictly: true,
  lazy: true,
  lazyLoad(node: any, resolve: Function) {
    getSubordinateArea(node.data.value).then(({ data }) => {
      resolve(convertData(data.data));
    });
  },
};
var cascader = ref();
const handleChangeQueryRegion = () => {
  const selectedOption = instance.refs.cascader.getCheckedNodes();
  cascader.value.togglePopperVisible();
  ruleForm.regionZh = selectedOption[0].pathLabels;
};
var objectVersionNumber = ref("");
var ide = ref("");
// 修改
const submitAddEquipForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      const {
        eNo,
        eName,
        eEquipName,
        eResponsible,
        eRegion,
        eRegionZh,
        eDetailedAddress,
        wide,
        High,
      } = equipForm;
      const obj = {
        address: eDetailedAddress ? eDetailedAddress : "",
        areaId: eRegion[2] ? eRegion[2] : null,
        areaName: eRegionZh[2] ? eRegionZh[2] : "",
        cityId: eRegion[1] ? eRegion[1] : null,
        cityName: eRegionZh[1] ? eRegionZh[1] : "",
        economizeId: eRegion[0] ? eRegion[0] : null,
        economizeName: eRegionZh[0] ? eRegionZh[0] : "",
        deviceName: eName ? eName : "",
        deviceNo: eNo ? eNo : null,
        linkPhone: eResponsible ? eResponsible : "",
        groupId: eEquipName ? eEquipName.slice(-1)[0] : [],
        linkGroupParent: JSON.stringify(eEquipName),
        width: wide,
        length: High,
        id: ide.value,
        objectVersionNumber: objectVersionNumber.value,
      };
      if (!unref(isAddEdit)) {
        addDevice(obj).then(({ data }) => {
          equipFormRef.value.clearValidate();
          if (data.code !== 1)
            return ElMessage({
              message: data.msg,
              type: "error",
              duration: 1000,
            });
          getList(ruleForm, "");
          ElMessage({ message: data.msg, type: "success", duration: 1000 });
        });
      } else {
        devicePut(obj).then(({ data }) => {
          equipFormRef.value.clearValidate();

          if (data.code !== 1)
            return ElMessage({
              message: data.msg,
              type: "error",
              duration: 1000,
            });
          ElMessage({ message: data.msg, type: "success", duration: 1000 });
          getList(ruleForm, "");
        });
      }
      getList(ruleForm, "");
      resetEquipForm();
    }
  });
};

const editClick = async (row: any) => {
  row.isFile = true;
};
const editChang = async (row: any) => {
  row.isFile = false;

  let obj = {
    id: row.id,
    objectVersionNumber: row.objectVersionNumber,
    deviceName: row.deviceName,
    width: row.width,
    length: row.length,
    address: row.address,
    deviceNo: row.deviceNo,
    economizeId: row.economizeId,
    groupId: row.groupId,
    economizeName: row.economizeName,
    areaId: row.areaId,
    areaName: row.areaName,
    cityId: row.cityId,
    cityName: row.cityName,
    linkPhone: row.linkPhone,
    linkGroupParent: row.linkGroupParent,
  };
  devicePut(obj).then(({ data }) => {
    if (data.code !== 1)
      return ElMessage({ message: data.msg, type: "error", duration: 1000 });
    getList(ruleForm, "");
    ElMessage({ message: data.msg, type: "success", duration: 1000 });
  });
};
const onDialogClose = () => {
  if (unref(isAddEdit)) resetEquipForm();
  equipFormRef.value.clearValidate();
  equipForm.wide = "1";
  equipForm.High = "1";
};
const onDialogClos = () => {
  groupifo.value = false;
};
const resetEquipForm = () => {
  isNewDevice.value = false;
  for (let key in equipForm) {
    equipForm[key] = "";
  }
};

//更改分组回调
const isGroupingDialog = shallowRef(false);
const batchGrouping = shallowRef([]);
const changeGrouping = (rows: any) => {
  if (rows) {
    let selectGrouping = unref(multipleTableRef)!.getSelectionRows();
    if (selectGrouping.length > 0) {
      batchGrouping.value = selectGrouping.map((r: any) => r.id);
      isGroupingDialog.value = true;
    } else {
      if (!unref(dropdownGrouping)) return;
      dropdownGrouping.value.handleOpen();
    }
  }
};
var groupifo = ref(false);
const submitChangeGrouping = (formEl: FormInstance | undefined) => {
  if (equipForm.eEquipName.length <= 0) {
    groupifo.value = true;
    return;
  } else {
    groupifo.value = false;
  }
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      const newObj = {
        groupId: equipForm.eEquipName.splice(-1)[0],
        ids: unref(batchGrouping),
      };

      updateGroup(newObj).then(({ data }) => {
        if (data.code !== 1)
          return ElMessage({
            message: data.msg,
            type: "error",
            duration: 1000,
          });
        getList(ruleForm, "");
        ElMessage({ message: data.msg, type: "success", duration: 1000 });
        equipForm.eEquipName = [];
        isGroupingDialog.value = false;
      });
    }
  });
};
var equader = ref();
const casca = () => {
  equader.value.togglePopperVisible();
  if (equipForm.eEquipName.length <= 0) {
    groupifo.value = true;
  } else {
    groupifo.value = false;
  }
};
// 选中的  ID
var selectid = ref();
//发布广告回调
const clearAdsTable = (rows: any) => {
  if (rows) {
    let selectGrouping = unref(multipleTableRef)!.getSelectionRows();
    if (selectGrouping.length > 0) {
      localStorage.setItem("listid", JSON.stringify(selectid.value));
      router.push("/advertising/advertisingPublish");
    } else {
      if (!unref(clearAds)) return;
      clearAds.value.handleOpen();
    }
  }
};
// 发布
const issue = (rows: any) => {
  seleId.value = rows.id;
  localStorage.setItem("listid", JSON.stringify([seleId.value])); //26 要变成['26']
  router.push("/advertising/advertisingPublish");
};
//批量关机
const onFullShutdown = () => {
  let selectGrouping = unref(multipleTableRef)!.getSelectionRows();
  if (selectGrouping.length > 0) {
    const selectResult = selectGrouping.map((r: any) => r.id);
    deviceShutdown(selectResult).then(({ data }) => {
      if (data.code !== 1)
        return ElMessage({ message: data.msg, type: "error", duration: 1000 });
      ElMessage({ message: data.msg, type: "success", duration: 1000 });
    });
  } else {
    ElMessage({ message: "请选择设备", type: "error", duration: 1000 });
  }
};
//批量重启
const onFullRestart = async (rows: any) => {
  let selectGrouping = unref(multipleTableRef)!.getSelectionRows();
  if (selectGrouping.length > 0) {
    const selectResult = selectGrouping.map((r: any) => r.id);
    devicePoweron(selectResult).then(({ data }) => {
      if (data.code !== 1)
        return ElMessage({ message: data.msg, type: "error", duration: 1000 });
      ElMessage({ message: data.msg, type: "success", duration: 1000 });
    });
  } else {
    ElMessage({ message: "请选择设备", type: "error", duration: 1000 });
  }
};
//批量静音
const onFullMute = () => {
  let selectGrouping = unref(multipleTableRef)!.getSelectionRows();
  if (selectGrouping.length > 0) {
    const selectResult = selectGrouping.map((r: any) => r.id);
    deviceMute(selectResult).then(({ data }) => {
      if (data.code !== 1)
        return ElMessage({ message: data.msg, type: "error", duration: 1000 });
      ElMessage({ message: data.msg, type: "success", duration: 1000 });
    });
  } else {
    ElMessage({ message: "请选择设备", type: "error", duration: 1000 });
  }
};
//批量取消静音
const onFullCancelMute = () => {
  let selectGrouping = unref(multipleTableRef)!.getSelectionRows();
  if (selectGrouping.length > 0) {
    const selectResult = selectGrouping.map((r: any) => r.id);
    deviceoffMute(selectResult).then(({ data }) => {
      if (data.code !== 1)
        return ElMessage({ message: data.msg, type: "error", duration: 1000 });
      ElMessage({ message: data.msg, type: "success", duration: 1000 });
    });
  } else {
    ElMessage({ message: "请选择设备", type: "error", duration: 1000 });
  }
};

const onCancel = () => {
  for (let key in ruleForm) {
    ruleForm[key] = "";
  }
};

// 一级地区
const getRegionData = async () => {
  const { data } = await getEconomize();
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  regionData.value = convertData(data.data);
};
// 下级地区
const loadChildren = (node: any, resolve: Function) => {
  getSubordinateArea(node.data.value).then(({ data }) => {
    let res = convertData(data.data);
    res = res.map((r) => {
      if (node.level === 2) {
        r.hasChildren = false;
      }
      return r;
    });
    resolve(res);
  });
};
//表单部分
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<programMsgTable[]>([]);
//表格数据
const tableData = ref([]);

//勾选表单时触发
const handleSelectionChange = (val: programMsgTable[]) => {
  selectid.value = val.map((e) => e.id);

  multipleSelection.value = val;
};
//列表数据
const getList = async (parameters: any, val: any) => {
  let { deviceStatus, playStatus, region, regionZh, bombedStatus, dayValue } =
    parameters;
  const newObj = {
    groupId: unref(TreeValue),
    economizeId: region[0] ?? "",
    economizeName: regionZh[0] ?? "",
    cityId: region[1] ?? "",
    cityName: regionZh[1] ?? "",
    areaId: region[2] ?? "",
    areaName: regionZh[2] ?? "",
    keyword: val,
    logonStartDate: dayValue[0] ? dayValue[0] + " 00:00:00" : "",
    logonEndDate: dayValue[1] ? dayValue[1] + " 23:59:59" : "",
    onlineStatus: deviceStatus,
    playStatus: playStatus,
    version: bombedStatus,
    pageNum: unref(currentPage),
    pageSize: unref(currentPageSize),
  };
  const { data } = await devicePage(newObj);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  currentPageTotal.value = data.data.content.length;
  tableData.value = data.data.content;
};
// 设备，播放，使用，状态
const equipmentStatus = computed(() => {
  const equip = {
    0: "在线",
    1: "离线",
  };
  const bad = {
    0: "success",
    1: "danger",
    2: "primary",
  };
  const hig = {
    0: "使用中",
    1: "已暂停",
    2: "待续费",
  };
  const useInfoStatus = {
    0: "播放中",
    1: "已暂停",
    2: "空闲",
  };
  return { equip, bad, hig, useInfoStatus };
});
const opitInof = ref();
// 获取设备版本号
const softwares = async () => {
  let res = await software();
  opitInof.value = res.data.data;
};
//table数据复制
const copyFileName = (text: any) => {
  const clipboard: any = new ClipboardJS(".btn", {
    text: () => text.deviceNo,
  });
  clipboard.on("success", (e: any) => {
    ElMessage({ message: "已复制到剪贴板", type: "success", duration: 1000 });
    e.clearSelection();
  });
  clipboard.on("error", () => {
    ElMessage({ message: "复制失败", type: "error", duration: 1000 });
  });
  clipboard.onClick(event);
};
var placeholders = ref<any>("请输入");
var inputInfo = ref<any>("请输入");
var devName = ref("新增设备");
// 点击新增设备
const openClick = () => {
  isNewDevice.value = true;
  isAddEdit.value = false;
  disableds.value = false;
  placeholders.value = "请输入";
  inputInfo.value = "请输入";
  devName.value = "新增设备";
};
// 搜索框搜索
const SearchClick = (val: any) => {
  getList(ruleForm, val);
};
// var inputInfo = ('请输入')
//禁用input 框
var disableds = ref(false);
var isEditing = ref(false);
const onEditInfo = (rows: any) => {
  devName.value = "编辑设备";
  objectVersionNumber.value = rows.objectVersionNumber;
  ide.value = rows.id;
  isNewDevice.value = true;
  isEditing.value = true;
  isAddEdit.value = true;
  disableds.value = true;
  placeholders.value = "";
  let {
    deviceNo,
    deviceName,
    linkPhone,
    economizeId,
    economizeName,
    cityId,
    cityName,
    areaId,
    areaName,
    address,
    linkGroupParent,
    width,
    length,
  } = rows;

  equipForm.eNo = deviceNo;
  equipForm.eName = deviceName;
  equipForm.eEquipName = JSON.parse(linkGroupParent);
  equipForm.eResponsible = linkPhone;
  equipForm.eRegion = [economizeId, cityId, areaId].filter(
    (value) => value !== null
  );
  // equipForm.eRegion = [economizeId, cityId, areaId];

  equipForm.eRegionZh = [
    economizeName ? economizeName : "",
    cityName ? cityName : "",
    areaName ? areaName : "",
  ].filter(Boolean);

  equipForm.eDetailedAddress = address;
  equipForm.wide = width;
  equipForm.High = length;
};
//设备详情-远程控制
const isInfoEquip = shallowRef(false);
const infoEquipCount = shallowRef("1");
const radioControl = shallowRef("1");
const sliderVolumeControl = ref(0);
const checkedMuteControl = ref(false);
const sliderBacklightControl = shallowRef(0);
const infoName = [
  { title: "设备编号", key: "deviceNo" },
  { title: "最后上线IP", key: "lastOnlineIp" },
  { title: "设备名称", key: "deviceName" },
  { title: "MAC", key: "mac" },
  { title: "设备状态", key: "onlineStatus" },
  { title: "播放状态", key: "playStatus" },
  { title: "使用状态", key: "status" },
  { title: "软件版本", key: "version" },
  { title: "CPU", key: "cpu" },
  { title: "分组", key: "linkGroupParent" },
  { title: "内存", key: "internalStorage" },
  { title: "设备类型", key: "deviceType" },
  { title: "存储", key: "storage" },
  { title: "场景类型", key: "scenarioType" },
  { title: "系统版本", key: "systemVersion" },
  { title: "负责人手机", key: "linkPhone" },
  { title: "联网方式", key: "networkingMethods" },
  {
    title: "设备地址",
    key: ["economizeName", "cityName", "areaName", "address"],
  },
  { title: "固件版本", key: "firmwareVersion" },
  { title: "绑定时间", key: "bindingTime" },
  { title: "最后上线时间", key: "lastOnlineTime" },
  { title: "", key: "" },
];
const infoVal = ref<any>([]);
var ids = ref();
var seleId = ref();

//远程---设备详情
const onEquipInfo = async (rows: any, num: string | number) => {
  ids.value = rows.id;
  seleId.value = rows.id;
  isInfoEquip.value = true;
  num == "1" ? (infoEquipCount.value = "1") : (infoEquipCount.value = "2");
  const { data } = await device(rows.id);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  // 字节转换为G并添加后缀
  function bytesToGB(bytes: any) {
    const gb = bytes / (1024 * 1024 * 1024);
    let result = "";
    if (gb >= 1) {
      result = gb.toFixed(2) + "G";
    } else {
      result = (bytes / (1024 * 1024)).toFixed(2) + "MB";
    }

    return result;
  }

  // 转换data对象中的storage和internalStorage属性值
  function convertStorageToGB(data: {
    storage: string | null;
    internalStorage: string | null;
  }) {
    if (data.storage !== null) {
      data.storage = bytesToGB(data.storage); // 不需要添加后缀'b'
    } else {
      data.storage = ""; // 如果值为null，设置为null或其他指定值
    }

    if (data.internalStorage !== null) {
      data.internalStorage = bytesToGB(data.internalStorage); // 不需要添加后缀'b'
    } else {
      data.internalStorage = ""; // 如果值为null，设置为null或其他指定值
    }

    return data;
  }

  let ad = rows.linkGroupParent ? JSON.parse(rows.linkGroupParent) : "";
  let info = "";
  // 或者使用 forEach() 方法逐个提取字符串
  // ad.forEach(str => {
  //   info=str
  // });
  function findLabels(data, target) {
    let matchedLabels = "";

    data.forEach((item) => {
      if (target.includes(item.value)) {
        if (matchedLabels.length > 0 && !matchedLabels.endsWith("/")) {
          matchedLabels += "/";
        }
        matchedLabels += item.label;
      }

      if (item.children && item.children.length > 0) {
        const childLabels = findLabels(item.children, target);
        if (childLabels.length > 0) {
          if (matchedLabels.length > 0 && !matchedLabels.endsWith("/")) {
            matchedLabels += "/";
          }
          matchedLabels += childLabels;
        }
      }
    });

    return matchedLabels;
  }

  let finalLabel = findLabels(trees.value, ad);

  data.data.linkGroupParent = finalLabel;

  infoVal.value = convertStorageToGB(data.data);
  const { isMute, screenBacklight, volume } = data.data.deviceConfig;
  sliderVolumeControl.value = volume;
  checkedMuteControl.value = isMute;
  sliderBacklightControl.value = screenBacklight;
  //  equipForm.eEquipName = JSON.parse(linkGroupParent);
};

//开机-重启
const onBootRestart = async (rows: any) => {
  const { data } = await devicePoweron([rows]);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  ElMessage({ message: data.msg, type: "success", duration: 1000 });
};
//关机
const onShutdown = async (rows: any) => {
  const { data } = await deviceShutdown([rows]);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  ElMessage({ message: data.msg, type: "success", duration: 1000 });
};
// 详情关机
const poweOff = async (val: any) => {
  const res = await deviceShutdown([ids.value]);
  if (res.data.code == 1) {
    ElMessage({ message: res.data.msg, type: "success", duration: 1000 });
  } else {
    ElMessage({ message: res.data.msg, type: "error", duration: 1000 });
  }
};
// 详情重启
const editOpen = async () => {
  let res = await devicePoweron([ids.value]);
  if (res.data.code == 1) {
    ElMessage({ message: res.data.msg, type: "success", duration: 1000 });
  } else {
    ElMessage({ message: res.data.msg, type: "error", duration: 1000 });
  }
};
const goList = (row: any) => {
  router.push({
    path: "/goods/BroadcastPlan",
    query: { id: row.id },
  });
  localStorage.setItem("goID", row.id);
};
// 详情音量/光
const changeSlider = async () => {
  let data = {
    id: ids.value,
    volume: sliderVolumeControl.value,
    screenBacklight: sliderBacklightControl.value,
  };
  let res = await deviceService(data);
  if (res.data.code == 1) {
    ElMessage({ message: res.data.msg, type: "success", duration: 1000 });
  } else {
    ElMessage({ message: res.data.msg, type: "error", duration: 1000 });
  }
};
const openBtns = async () => {
  let ishoa = ref<any>("");
  if (checkedMuteControl.value == true) {
    ishoa.value = 0;
  } else {
    ishoa.value = 1;
  }
  let { data } = await deviceControl(ids.value);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  ElMessage({ message: data.msg, type: "success", duration: 1000 });
};
// 设备静音
const onMute = async (rows: any) => {
  const { data } = await deviceControl(rows);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  ElMessage({ message: data.msg, type: "success", duration: 1000 });
};
// 设备取消静音
const closeMute = async (rows: any) => {
  const { data } = await deviceoffMute([rows]);
  if (data.code !== 1)
    return ElMessage({ message: data.msg, type: "error", duration: 1000 });
  ElMessage({ message: data.msg, type: "success", duration: 1000 });
};
//pages
const currentPage = shallowRef(1);
const currentPageSize = shallowRef(10);
const currentPageTotal = shallowRef(0);

const handleSizeChange = (val: number) => {
  currentPageSize.value = val;
  getList(ruleForm, "");
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getList(ruleForm, "");
};

onMounted(() => {
  getTreeData();
  getRegionData();
  getList(ruleForm, "");
  softwares();
});
</script>

<style lang="scss" scoped>
.custom-datepicker {
  position: relative;
}
.custom-datepicker ::v-deep .el-date-editor .el-range__icon {
  height: inherit;
  font-size: 14px;
  color: var(--el-text-color-placeholder);
  float: left;
  position: fixed;
  right: 19px;
}
.tree-container {
  width: 100%;
  height: 400px;
  overflow: auto;
}
::v-deep .placeholder-red::placeholder {
  color: #606266 !important;
}
.add {
  width: 3px;
  height: 20px;

  /* 主色 */

  background: #0daeff;
  border-radius: 3px;

  /* Inside auto layout */

  flex: none;
  order: 0;
  flex-grow: 0;
}
::v-deep .wrap_right_list--table-content .el-dropdown-link[data-v-e3437c5e] {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-left: 12px;
  padding: 7px 11px;
  outline: none;
}
.program_flex_box {
  width: 100%;
  height: calc(100vh - 100px);
  font-size: 14px;
}
::v-deep .el-tree-node__content {
  display: flex;
  align-items: center;
  height: 34px;
  cursor: pointer;
}
.wrap_left_grouping {
  width: 20%;
  height: 100%;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  color: #303233;
  overflow-y: auto;

  &--head-title {
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #f6f7f9;
    white-space: nowrap;
    font-weight: 500;
  }

  &--content-area {
    padding: 20px 5px;

    .edit-child-node {
      width: calc(100% - 10px);
      height: 26px;

      :deep(.el-input__wrapper) {
        background: rgba(255, 255, 255, 0.6);
      }
    }
  }
}
.el-date-picker__editor.is-range .el-input__inner ~ .el-input__suffix {
  right: auto !important;
  left: calc(100% + 5px) !important;
  transform: translateX(-100%);
}
::v-deep .el-input input::selection {
  background-color: #79bbff;
}
.wrap_right_list {
  width: 80%;
  height: 100%;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin-left: 10px;
  overflow: hidden;
  position: relative;

  &--head-title {
    height: 56px;
    line-height: 56px;
    border-bottom: 1px solid #f6f7f9;
    white-space: nowrap;
    font-weight: 500;
  }

  &--head-operation {
    padding: 20px 0;
    overflow: auto;
    transition: transform 0.3s;

    .-addEquip_minHead {
      margin-bottom: 17px;
      font-weight: 500;
      color: #303233;
    }

    .-addDialogFormInput {
      width: 100%;

      &.e-l-cascader {
        :deep(.el-cascader) {
          width: 100%;
        }

        :deep(.el-input) {
          max-width: inherit;
        }
      }

      :deep(.el-input__wrapper) {
        width: inherit;
      }

      :deep(.el-input) {
        max-width: 195px;
      }
    }

    :deep(.el-input__wrapper) {
      width: 272px;
    }

    .angle-icon {
      transform: rotate(180deg);
    }

    .-advancedInput {
      :deep(.el-input__wrapper) {
        width: 200px;
      }
    }
  }

  &--table-content {
    .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
      font-size: 12px;
      margin-left: 12px;
      padding: 5px 11px;
      outline: none;
    }

    .file-child-node {
      width: calc(100% - 40px);
      height: 26px;
    }

    :deep(.el-table__row):hover .--table-column-icon {
      display: inline-block;
    }

    .--table-column-icon {
      display: none;
      margin-left: 10px;
      cursor: pointer;

      &:hover {
        :deep(.el-icon) {
          color: var(--el-color-primary);
        }
      }
    }

    //设备详情
    :deep(.el-dialog__body) {
      padding: 0 0 24px 0;
    }

    .e-l-dialog_box {
      width: 100%;
      padding: 0 20px;
      overflow: hidden;

      .control_prompt {
        font-weight: 500;
        margin-bottom: 20px;
      }

      .control_content {
        font-weight: 400;
      }

      :deep(.el-menu--horizontal) {
        border-bottom-width: 0;
      }

      .el-menu-demo {
        height: 30px;
      }
    }
    .-pages {
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform: translateX(-50%);
      z-index: 2;
      background: #fff;
      height: 6.5vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    :deep(.is-background .btn-prev) {
      border: 1px solid var(--el-border-color);
      background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    }

    :deep(.is-background .btn-next) {
      border: 1px solid var(--el-border-color);
      background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    }

    :deep(.el-pager li) {
      border: 1px solid var(--el-border-color);
      background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
    }
  }
}
</style>
